<template>
	<div>
		<el-dialog :title="title" v-model="dialogVisible" class="redius8" width="1200" center :before-close="handleClose">
			<el-scrollbar style="height: 700px;">
				<el-form :model="form"  :rules="rules" ref="queryRef" :inline="true" label-width="114px">
					<div class="bgWhite radius8">
						<div class="plr20 mt30">
							<div class="fb fs16 color333 mb30 pl10">
								基础信息
							</div>
							<el-form-item label="产品属性" prop="productType">
								<el-select :disabled="disabled" size="large" v-model="form.productType" placeholder="请选择" style="width: 238px;">
									<el-option v-for="dict in bus_product_type" :key="dict.value"
										:label="dict.label" :value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="产品名称" prop="productName">
								<el-input size="large" :disabled="disabled" v-model="form.productName" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="品牌名称" prop="brandName" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.brandName" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="产品编码" prop="productCode">
								<el-input size="large" :disabled="disabled" v-model="form.productCode" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="产品类别" prop="productCategory">						
								<el-select size="large" :disabled="disabled" v-model="form.productCategory" placeholder="请选择" style="width: 238px;">
									<el-option v-for="dict in bus_product_category" :key="dict.value"
										:label="dict.label" :value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="产品分类" prop="classifyId"  style="margin-right: 0;">
								<el-tree-select size="large" :disabled="disabled" v-model="form.classifyId" 
								:data="cateOptions"
									 @node-click="changeTree"
									  :props="{
								      value: 'id',
								      label: 'name',
								      children: 'children',
								   }" value-key="id" placeholder="请选择" check-strictly
									style="width: 238px"
									/>
							</el-form-item>
							<el-form-item label="农药登记证号" prop="pesticideRegistrationNumber" >
								<el-input size="large" :disabled="disabled" v-model="form.pesticideRegistrationNumber" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="农药生产许可证号" prop="pesticideProductionLicenseNumber" label-width="150px">
								<el-input size="large" :disabled="disabled" v-model="form.pesticideProductionLicenseNumber" style="width: 203px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="产品质量标准号" prop="productQualityStandardNumber" label-width="138px" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.productQualityStandardNumber" style="width: 214px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="毒性" prop="toxicity">
								<el-select size="large" :disabled="disabled" v-model="form.toxicity" placeholder="请选择" style="width: 238px;">
									<el-option v-for="dict in bus_toxicity" :key="dict.value"
										:label="dict.label" :value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="剂型" prop="dosageForm">
								<el-radio-group :disabled="disabled" v-model="form.dosageForm">
									<el-radio v-for="dict in bus_sosage_form" :key="dict.value" :label="dict.value"
										:value="dict.value" size="large">
										{{dict.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
							<br>
							<el-form-item label="有效成分1" prop="activeIngredient1" >
								<el-input size="large" :disabled="disabled" v-model="form.activeIngredient1" placeholder="请填写" style="width: 238px;"/>
							</el-form-item>
							<el-form-item label="有效成分1含量" prop="activeIngredientContent1" label-width="114">
								<el-input
								      v-model="form.activeIngredientContent1"
								      placeholder="请输入内容"
								      class="input-with-select"
									  size="large"
									  style="width: 240px;"
									   :disabled="disabled"
								    >
								      <template #prepend>
								        	<el-select size="large" :disabled="disabled" v-model="form.activeIngredientUnit1" placeholder="请选择" style="width: 94px;">
								        		<el-option v-for="dict in bus_active_ingredient_content" :key="dict.value"
								        			:label="dict.label" :value="dict.value" />
								        	</el-select>
								      </template>
								</el-input>
							</el-form-item>
							<el-form-item label="有效成分2" prop="activeIngredient2" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.activeIngredient2" placeholder="请填写"  style="width: 238px;"/>
							</el-form-item>
							<el-form-item label="有效成分2含量" prop="activeIngredientContent2" label-width="114px">
								<el-input size="large" :disabled="disabled" v-model="form.activeIngredientContent2" placeholder="请输入内容" 
								#prepend style="width: 240px;">
									<el-select size="large" v-model="form.activeIngredientUnit2" placeholder="请选择" style="width: 94px;">
										<el-option v-for="dict in bus_active_ingredient_content" :key="dict.value"
											:label="dict.label" :value="dict.value" />
									</el-select>
								</el-input>
							</el-form-item>
							<el-form-item label="有效成分3" prop="activeIngredient3">
								<el-input size="large" :disabled="disabled" v-model="form.activeIngredient3" placeholder="请填写"  style="width: 238px;"/>
							</el-form-item>
							<el-form-item label="有效成分3含量" prop="activeIngredientContent3" label-width="114px" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.activeIngredientContent3" placeholder="请输入内容" #prepend style="width: 240px;">
									<el-select size="large" v-model="form.activeIngredientUnit3" placeholder="请选择" style="width: 94px;">
										<el-option v-for="dict in bus_active_ingredient_content" :key="dict.value"
											:label="dict.label" :value="dict.value" />
									</el-select>
								</el-input>
							</el-form-item>
							<br>
							<el-form-item label="产品宣传图" prop="productPromoImageUrl" style="width: 350px;">
								<el-upload
									v-if="form.productPromoImageUrl == ''"
									name="file"
									:limit='1'
									accept=".jpeg,.jpg,.png"
									class="avatar-uploader"
									:action="url"
									:headers="headers"
									:show-file-list="false"
									:on-success="handleAvatarSuccess"
									:before-upload="beforeAvatarUpload"
									 :disabled="disabled"
								 >
									<!-- <img v-if="form.productPromoImageUrl" :src="form.productPromoImageUrl" style="width: 110px;height: 110px;" /> -->
									<div>
										<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
										<div class="fs12">上传图片</div>
									</div>
								 </el-upload>
								 <div class="relative" v-else>
								 	<el-image
								 	  class="radius8"
								 	  style="width: 110px; height: 110px"
								 	  :src="form.productPromoImageUrl" 
								 	  :preview-src-list="[form.productPromoImageUrl]">
								 	</el-image>
								 	<div 
								 	@click="form.productPromoImageUrl = ''"
								 	class="absolute fs18 cursor" style="z-index: 1;width: 18px; height: 18px;top: -12px; right: -7px;border-radius: 50%;background-color: #fff;">
								 		<el-icon><CircleCloseFilled /></el-icon>
								 	</div>
								 </div>
							</el-form-item>
							<el-form-item label="产品形象图" prop="productImageUrl" style="width: 350px;">
								<el-upload
									v-if="form.productImageUrl == ''"
									name="file"
									class="avatar-uploader"
									:action="url"
									:headers="headers"
									:show-file-list="false"
									:on-success="handleAvatarSuccess2"
									:before-upload="beforeAvatarUpload"
									 :disabled="disabled"
								 >
									<!-- <img v-if="form.productImageUrl" :src="form.productImageUrl" style="width: 110px;height: 110px;" /> -->
									<div>
										<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
										<div class="fs12">上传图片</div>
									</div>
								 </el-upload>
								 <div class="relative" v-else>
								 	<el-image
								 	  class="radius8"
								 	  style="width: 110px; height: 110px"
								 	  :src="form.productImageUrl" 
								 	  :preview-src-list="[form.productImageUrl]">
								 	</el-image>
								 	<div 
								 	@click="form.productImageUrl = ''"
								 	class="absolute fs18 cursor" style="z-index: 1;width: 18px; height: 18px;top: -12px; right: -7px;border-radius: 50%;background-color: #fff;">
								 		<el-icon><CircleCloseFilled /></el-icon>
								 	</div>
								 </div>
							</el-form-item>
						</div>
						<div class="p20">
							<div class="fb fs16 color333 mb30 pl10">
								登记适用范围和方法
							</div>
							<el-form-item label="作物场所" prop="cropLocation">
								<el-input size="large" :disabled="disabled" v-model="form.cropLocation" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="防治对象" prop="controlObject">
								<el-select v-model="form.controlObject" placeholder="请选择" size="large" style="width: 238px">
									<el-option v-for="dict in bus_control_object" :key="dict.value" :label="dict.label"
										:value="dict.value" />
								</el-select>
							</el-form-item>
							<el-form-item label="用药量" prop="dosage" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.dosage" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="施用方式" prop="applicationMethod">
								<el-select  :disabled="disabled" v-model="form.applicationMethod" placeholder="请选择" size="large" 
								multiple collapse-tags style="width: 238px">
									<el-option v-for="dict in bus_application_mode" :key="dict.value" :label="dict.label"
										:value="dict.value" />
								</el-select>
							</el-form-item>
						</div>	
						<div class="plr20 pt20">
							<div class="fb fs16 color333 mb30 pl10">
								推荐适用范围和方法
							</div>
							<el-form-item label="推荐适用作物" prop="recommendedCrops1" label-width="106">
								<el-select :disabled="disabled" v-model="form.recommendedCrops1" 
								placeholder="请选择" size="large" multiple 
								:collapse-tags="disabled ? false : true"
									style="width: 238px">
									<el-option v-for="dict in cropNameArr" :key="dict.id*1" :label="dict.cropName"
										:value="dict.id" />
								</el-select>
							</el-form-item>
							<el-form-item label="推荐适用靶标" prop="recommendedTargets1" label-width="106">
								<el-select :disabled="disabled" 
								v-model="form.recommendedTargets1" placeholder="请选择" size="large" 
								:collapse-tags="disabled ? false : true" multiple style="width: 238px">
									<el-option v-for="dict in bus_target" :key="dict.value" :label="dict.label"
										:value="dict.value" />
								</el-select>
							</el-form-item>
						</div>	
						<div class="p20">
							<div class="fb fs16 color333 mb30 pl10">
								其他信息
							</div>
							<el-form-item label="电子标签" prop="electronicLabel">
								<el-input size="large" :disabled="disabled" v-model="form.electronicLabel" style="width: 238px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="销售渠道" prop="salesChannel1" label-width="90">
								<div style="width: 135px;">
									<el-checkbox-group :disabled="disabled" v-model="form.salesChannel1">
										<el-checkbox v-for="dict in bus_channel" :key="dict.value" :label="dict.value"
											:value="dict.value" size="large">
											{{dict.label}}
										</el-checkbox>
									</el-checkbox-group>
								</div>
							</el-form-item>
							<el-form-item label="储存运输方法" prop="storageTransportationMethod" label-width="106">
								<el-input size="large" :disabled="disabled" v-model="form.storageTransportationMethod" style="width: 135px" placeholder="请填写" />
							</el-form-item>
							<el-form-item label="质量保质期" prop="shelfLife" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" v-model="form.shelfLife" style="width: 100px" placeholder="请填写" />
							</el-form-item>
							<br>
							<el-form-item label="产品性能" prop="productPerformance" label-width="106">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 442px;" 
								:rows="5" v-model="form.productPerformance" placeholder="请输入信息"/>
							</el-form-item>
							<el-form-item label="使用技术要求" prop="technicalRequirements" label-width="106" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 442px;" 
								:rows="5" v-model="form.technicalRequirements" placeholder="请输入信息"/>
							</el-form-item>
							<el-form-item label="注意事项" prop="precautions" label-width="106">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 442px;" 
								:rows="5" v-model="form.precautions" placeholder="请输入信息"/>
							</el-form-item>
							<el-form-item label="中毒急救措施" prop="poisoningFirstAid" label-width="106" style="margin-right: 0;">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 442px;" 
								:rows="5" v-model="form.poisoningFirstAid" placeholder="请输入信息"/>
							</el-form-item>
							<el-form-item label="备注信息" prop="remark" label-width="106">
								<el-input size="large" :disabled="disabled" type="textarea" resize="none" class="textReset" style="width: 442px;" 
								:rows="5" v-model="form.remark" placeholder="请输入信息"/>
							</el-form-item>
						</div>	
					</div>
				</el-form>
			</el-scrollbar>
			<div class="text-center mt25" v-if="!disabled">
				<el-button type="defaultBtn" @click="submitProduct('queryRef')" style="width: 88px;height: 38px;">
					{{form.id == '' ? '创建产品' :'保存'}}
				</el-button>
				<el-button type="operate" style="width: 88px;height: 38px;" 
					@click="resetQuery()">重置</el-button>
				<el-button style="width: 88px;height: 38px;" @click="dialogVisible = false">取消</el-button>	
				<!-- <el-button style="width: 88px;height: 38px;" @click="lookPage()" v-if="form.id == ''">预览</el-button> -->
			</div>
		</el-dialog>	
	</div>
</template>

<script>
	import {
		addProduct,//新增产品
		getProduct,//产品详情
		updateProduct,//修改产品
		listClassify
	} from "@/api/business/product";
	import {
		cropListData//获取作物
	} from "@/api/business/customer";
	import {
		getDivisions
	} from "@/api/business/opportunity";
	import {
		resetForm,
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		getToken
	} from "@/utils/auth";
	let url = import.meta.env.VITE_APP_BASE_API + "/common/upload"
	let id = 0;
	export default{
		data(){
			return{
				bus_product_type:this.useDict('bus_product_type').bus_product_type,//产品类型
				bus_product_category:this.useDict('bus_product_category').bus_product_category,//产品类别
				bus_toxicity:this.useDict('bus_toxicity').bus_toxicity,//毒性
				bus_sosage_form:this.useDict('bus_sosage_form').bus_sosage_form,//剂型
				bus_control_object:this.useDict('bus_control_object').bus_control_object,//防治对象
				bus_application_mode:this.useDict('bus_application_mode').bus_application_mode,//施用方式
				bus_target:this.useDict('bus_target').bus_target,//靶标
				bus_channel:this.useDict('bus_channel').bus_channel,//渠道
				bus_active_ingredient_content:this.useDict('bus_active_ingredient_content').bus_active_ingredient_content,//单位
				dialogVisible:false,
				title:'',//弹窗标题
				disabled:'',//1：查看详情
				headers: {
					Authorization: 'Bearer ' + getToken() // 这里的getToken方法需要你自己实现，用于获取你的Token
				},
				url: url,
				cateOptions:[],//产品分类
				form: {
					id: '',
					classifyId: '',
					productType: '',
					productName: '',
					brandName: '',
					productCode: '',
					productCategory: '',
					pesticideRegistrationNumber: '',
					pesticideProductionLicenseNumber: '',
					productQualityStandardNumber: '',
					toxicity: '',
					productPromoImageUrl: '',
					productImageUrl: '',
					dosageForm: '',
					activeIngredient1: '',
					activeIngredientContent1: '',
					activeIngredientUnit1: '',
					activeIngredient2: '',
					activeIngredientContent2: '',
					activeIngredientUnit2: '',
					activeIngredient3: '',
					activeIngredientContent3: '',
					activeIngredientUnit3: '',
					cropLocation: '',
					controlObject: '',
					dosage: '',
					applicationMethod: '',
					recommendedCrops: '',
					recommendedCrops1: '',
					recommendedTargets: '',
					recommendedTargets1: '',
					electronicLabel: '',
					salesChannel: '',
					salesChannel1: [],
					storageTransportationMethod: '',
					shelfLife: '',
					productPerformance: '',
					technicalRequirements: '',
					precautions: '',
					poisoningFirstAid: '',
					remark: '',
				},
				rules: {
					productName: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'blur'
					}],
					brandName:[{
						required: true,message: '请输入品牌名称',trigger: 'blur'
					}],
					classifyId:[{required: true,message: '请输入产品分类',trigger: 'blur'}],
					pesticideRegistrationNumber:[
						{required: true,message: '请输入农药登记证号',trigger: 'blur'}
					],
					pesticideProductionLicenseNumber:[
						{required: true,message: '请输入农药生产许可证号',trigger: 'blur'}
					],
					productQualityStandardNumber:[
						{required: true,message: '请输入产品质量标准号',trigger: 'blur'}
					],
					toxicity:[
						{required: true,message: '请选择毒性',trigger: 'change'}
					],
					dosageForm:[
						{required: true,message: '请选择剂型',trigger: 'change'}
					],
					activeIngredient1:[
						{required: true,message: '请输入有效成份1名称',trigger: 'blur'}
					],
					activeIngredientContent1:[
						{required: true,message: '请输入有效成份1含量',trigger: 'blur'}
					],
					salesChannel1:[
						{required: true,message: '请选择销售渠道',trigger: 'change'}
					]
					// activeIngredient2:[
					// 	{required: true,message: '请输入有效成份2名称',trigger: 'blur'}
					// ],
					// activeIngredientContent2:[
					// 	{required: true,message: '请输入有效成份2含量',trigger: 'blur'}
					// ],
					// activeIngredient3:[
					// 	{required: true,message: '请输入有效成份3名称',trigger: 'blur'}
					// ],
					// activeIngredientContent3:[
					// 	{required: true,message: '请输入有效成份3含量',trigger: 'blur'}
					// ]
				},
				list: [{}],
				loading: false,
				teamOptions: '', //业务经理
				cropNameArr: [], //作物名称
				productList: [], //产品名称
			}
		},
		created() {
			
		},
		methods:{
			handleClose(){
				this.dialogVisible = false
			},
			open(num,disabled){
				this.disabled = disabled //1：查看详情
				this.resetQuery()
				this.dialogVisible = true
				if(this.resetQuery()){
					if(num == ''){
						this.title = '新增产品'
					}else if(num !='' && !disabled){
						this.title = '编辑产品'
						this.form.id = num
					}else{
						this.title = '产品详情'
						this.form.id = num
					}
					this.getTree()
					this.dialogVisible = true
				}
			},
			//产品分类
			getTree() {
				listClassify().then(res => {
					let dataArr = res.data
					for (let key in dataArr) {
						dataArr[key].label = dataArr[key].name
					}
					this.cateOptions = this.handleTree(dataArr)
					this.cropVariety()
				})
			},
			// 获取作物列表
			cropVariety() {
				cropListData().then(response => {
					this.cropNameArr = response.data
					if(this.form.id != ''){
						//获取详情
						this.getProductDetail()
					}
				})
			},
			// 获取详情
			getProductDetail() {
				getProduct(this.form.id).then(res => {
					this.form = res.data
					this.form.recommendedTargets1 = res.data.recommendedTargets == '' ? '' : res.data.recommendedTargets.split(',')
					this.form.recommendedCrops1 = res.data.recommendedCrops == '' ? '' :  res.data.recommendedCrops.split(',')
					this.form.applicationMethod = res.data.applicationMethod == '' ? '' :  res.data.applicationMethod.split(',')
					this.form.salesChannel1 = this.form.salesChannel =='' ? [] : this.form.salesChannel.split(',')
				})
			},
			// 重置
			resetQuery() {
				this.form = {
					id: '',
					classifyId: '',
					productType: '',
					productName: '',
					brandName: '',
					productCode: '',
					productCategory: '',
					pesticideRegistrationNumber: '',
					pesticideProductionLicenseNumber: '',
					productQualityStandardNumber: '',
					toxicity: '',
					productPromoImageUrl: '',
					productImageUrl: '',
					dosageForm: '',
					activeIngredient1: '',
					activeIngredientContent1: '',
					activeIngredientUnit1: '',
					activeIngredient2: '',
					activeIngredientContent2: '',
					activeIngredientUnit2: '',
					activeIngredient3: '',
					activeIngredientContent3: '',
					activeIngredientUnit3: '',
					cropLocation: '',
					controlObject: '',
					dosage: '',
					applicationMethod: '',
					recommendedCrops: '',
					recommendedCrops1: '',
					recommendedTargets: '',
					recommendedTargets1: '',
					electronicLabel: '',
					salesChannel: '',
					salesChannel1: [],
					storageTransportationMethod: '',
					shelfLife: '',
					productPerformance: '',
					technicalRequirements: '',
					precautions: '',
					poisoningFirstAid: '',
					remark: '',
				}
				return true
			},
			// 产品图
			handleAvatarSuccess(e) {
				this.form.productPromoImageUrl = e.url
			},
			// 形象图
			handleAvatarSuccess2(e) {
				this.form.productImageUrl = e.url
			},
			beforeAvatarUpload(e) {
				console.log(e, 'e2')
			},
			//添加 / 编辑
			submitProduct(formName) {
				// console.log(this.form,'this.form.')
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.form.salesChannel = this.form.salesChannel1.join(',')
						// 新增
						this.form.recommendedCrops = this.form.recommendedCrops1 != '' ? this.form.recommendedCrops1.join(',') : ''
						this.form.recommendedTargets = this.form.recommendedTargets1 != '' ? this.form.recommendedTargets1.join(',') : ''
						this.form.applicationMethod = this.form.applicationMethod != '' ? this.form.applicationMethod.join(',') : ''
						if (this.form.id == '') {
							addProduct(this.form).then(response => {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								this.handleClose()
								this.$emit('refreshList')
							})
						} else {
							// 编辑
							this.form.followupRecords = null
							for (let key in this.form.cropStructuresList) {
								delete this.form.cropStructuresList[key].id
							}
							updateProduct(this.form).then(response => {
								this.$message({
									message: '编辑成功',
									type: 'success'
								});
								this.handleClose()
								this.$emit('refreshList')
							})
						}
					} else {
						return false;
					}
				});
			},
		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}
	
	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}
	
	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}
</style>